<template>
  <div class="canvas_comp_page">
    <div :class="{
        pgItem: isPgLight === false && pgItemActiveIndex !== 0,
        pgItemActive: isPgLight === false && pgItemActiveIndex === 0,
        pgItemLight: isPgLight === true && pgItemActiveIndex !== 0,
        pgItemLightActive: isPgLight === true &&  pgItemActiveIndex === 0
      }" @click="pgItemClick0"></div>
    <div :class="{
        pgItem: isPgLight === false && pgItemActiveIndex !== 1,
        pgItemActive: isPgLight === false && pgItemActiveIndex === 1,
        pgItemLight: isPgLight === true && pgItemActiveIndex !== 1,
        pgItemLightActive: isPgLight === true &&  pgItemActiveIndex === 1
      }" @click="pgItemClick1"></div>
    <div :class="{
        pgItem: isPgLight === false && pgItemActiveIndex !== 2,
        pgItemActive: isPgLight === false && pgItemActiveIndex === 2,
        pgItemLight: isPgLight === true && pgItemActiveIndex !== 2,
        pgItemLightActive: isPgLight === true &&  pgItemActiveIndex === 2
      }" @click="pgItemClick2"></div>
  </div>
</template>

<script>
export default {
  name: "change_page",
  data() {
    return {
      pgItemActiveIndex: 0 // 判断 pgItem 栏按钮选中
    }
  },
  props: {
    isPgLight: {
      type: Boolean,
      default: false
    },
    isPgItemActiveIndex: {
      type: Number,
      default: 0
    }
  },
  watch: {
    'isPgItemActiveIndex'(value) {
      this.pgItemActiveIndex = value;
    }
  },
  methods: {
    pgItemClick0() {
      this.pgItemActiveIndex = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      this.$emit("change_page_0");
    },
    pgItemClick1() {
      this.pgItemActiveIndex = 1;
      document.documentElement.scrollTop = window.innerHeight;
      document.body.scrollTop = window.innerHeight;
    },
    pgItemClick2() {
      this.pgItemActiveIndex = 2;
      document.documentElement.scrollTop = window.innerHeight +  (window.innerHeight >= 920 ? window.innerHeight : 920);
      document.body.scrollTop = window.innerHeight +  (window.innerHeight >= 920 ? window.innerHeight : 920);
    }
  }
}
</script>

<style scoped>
  .canvas_comp_page {
    width: 60px;
    height: 140px;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 10;
    caret-color: transparent; /* 去除光标颜色 */
    animation: move 3s forwards ease;
  }

  @keyframes move {
    50% {
      transform: translateY(-40px);
    }
    100% {
      transform: translateY(0px);
    }
  }

  .pgItem, .pgItemActive, .pgItemLight, .pgItemLightActive {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-bottom: 15px;
    cursor: pointer;
    transition: background-color 0.6s, border-color 0.6s;
  }

  .pgItem {
    border: 3px solid #666;
  }

  .pgItemActive {
    border: 3px solid #666;
    background-color: #666;
  }

  .pgItemLight {
    border: 3px solid #fff;
  }

  .pgItemLightActive {
    border: 3px solid #fff;
    background-color: #fff;
  }
</style>